<template>
  <div>
    <el-form ref="searchFormRef" :model="searchForm" label-width="100px" :inline="true">
      <el-form-item label="选择项目：">
        <el-select v-model="searchForm.projectName" placeholder="请选择" clearable @change="recordSeleteChange">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <span class="spn">
        <el-form-item>
          <el-input v-model="searchForm.customerName" class="inputCss" placeholder="姓名、手机号、会员号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">搜索顾客</el-button>
        </el-form-item>
      </span>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="recordList">
      <el-table-column label="划扣时间" prop="createdTime" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目" prop="projectName" align="center" />
      <el-table-column label="项目单号" prop="projectNumber" align="center" />
      <el-table-column label="订单号" prop="orderNumber" align="center" />
      <el-table-column label="顾客" prop="customerName" align="center" />
      <el-table-column label="执行数量" prop="deductionAmount" align="center" />
      <el-table-column label="医生" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.doctorPrincipal }}&nbsp;&nbsp;&nbsp;{{ scope.row.doctorAssist }}</span>
        </template>
      </el-table-column>
      <el-table-column label="护士" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nursePrincipal }}&nbsp;&nbsp;&nbsp;{{ scope.row.nurseAssist }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remarks" show-overflow-tooltip align="center" />
    </el-table>
    <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
  </div>
</template>
<script>
// import { Table } from "@rabbit.do/rabbit";
export default {
  components: {
    // Table,
  },
  data() {
    return {
      searchForm: {},
      options: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      recordList: [],
    };
  },
  created() {
    this.getRecordList();
    this.getProjectData();
  },
  methods: {
    async getRecordList() {
      this.loading = true;
      const res = await this.$api['department/project/deductionrecord']({ ...this.params, query: this.searchForm });
      // console.log(res);
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询划扣记录列表失败！');
      this.recordList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getRecordList();
    },
    // 所有项目
    async getProjectData() {
      const res = await this.$api['department/consumables/projectall']();
      if (res.code === 200) {
        this.options = res.data;
      }
    },
    // 搜索
    searchBtn() {
      this.getRecordList();
    },
    recordSeleteChange() {
      this.getRecordList();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
